<template>
  <div class="vip">
    <div class="vip-box">
      <div class="head">
        <h1>购买须知</h1>
        <p>《飞廉》《文鳐》是完全免费的，不存在任何收费版本。</p>
        <p>《仓颉》全量代码生成平台会收取一定的服务费，需要咨询购买请微信联系<span style="font-size: 18px"><el-button type="text" @click="alert(0)">（查看微信）</el-button></span>。</p>
<!--        <p>凡在2021年10月31日前购买个人版的用户，赠送
          <el-popover
              placement="bottom"
              width="400"
              trigger="hover">
            <el-image src="http://feilian.oss-cn-beijing.aliyuncs.com/mouse.jpg" />
            <span slot="reference"><el-button type="text">机械师M7电竞游戏鼠标（灵动版）</el-button></span>
          </el-popover>
          一个；购买企业版的用户，赠送
          <el-popover
              placement="bottom"
              width="400"
              trigger="hover">
            <el-image src="http://feilian.oss-cn-beijing.aliyuncs.com/logi.jpg" />
            <span slot="reference"><el-button type="text">罗技K845机械键盘</el-button></span>
          </el-popover>一个。</p>-->
      </div>
      <div class="vip-content">
        <avue-data-pay :option="option"></avue-data-pay>
      </div>

      <el-dialog :visible.sync="box" width="20%">
        <div class="head">
          <p>{{ tip }}</p>
          <el-image :src="wxImage" />
        </div>

      </el-dialog>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      tip: undefined,
      wxImage: undefined,
      box: false,
      option: {
        span: 6,
        data: [
          {
            title: '免费版',
            src: 'images/vip2.png',
            money: '',
            dismoney: '0',
            tip: '/ 永久',
            color: '#ffa820',
            subtext: '获取',
            click: () => {
              this.alert(1)
            },
            list: [
              {
                title: '永久免费使用《飞廉》',
                check: true
              },
              {
                title: '永久免费使用《文鳐》',
                check: true
              },
              {
                title: '免费试用《仓颉》',
                check: true
              }
            ]
          },
          {
            title: '个人版',
            src: 'images/vip3.png',
            color: '#ef4868',
            money: '499',
            dismoney: '299',
            tip: '/ 年',
            subtext: '获取',
            click: () => {
              this.alert(2)
            },
            list: [
              {
                title: '永久免费使用《飞廉》',
                check: true
              },
              {
                title: '永久免费使用《文鳐》',
                check: true
              },
              {
                title: '《仓颉》个人版，PC端和移动端的代码生成功能',
                check: true
              },
              {
                title: '移动端和PC端交互的代码样例',
                check: true
              },
              {
                title: '一对一的技术支持',
                check: true
              }
            ]
          },
          {
            title: '企业版',
            src: 'images/vip4.png',
            color: '#676ee5',
            money: '5999',
            dismoney: '3999',
            tip: '/ 年',
            subtext: '获取',
            click: () => {
              this.alert(3)
            },
            list: [
              {
                title: '永久免费使用《飞廉》',
                check: true
              },
              {
                title: '永久免费使用《文鳐》',
                check: true
              },
              {
                title: '《仓颉》企业版，20个用户数量，用户数据互通，PC端和移动端的代码生成，接口管理等功能',
                check: true
              },
              {
                title: '赠送《明镜》项目管理平台一年',
                check: true
              },
              {
                title: '支持对公转账，提供增值税发票',
                check: true
              },
              {
                title: '移动端和PC端交互的代码样例',
                check: true
              },
              {
                title: '一对一的技术支持',
                check: true
              },
              {
                title: '人工（在线）的框架讲解',
                check: true
              }
            ]
          },
          {
            title: '定制版',
            src: 'images/vip1.png',
            color: '#333',
            dismoney: '面议',
            tip: '',
            subtext: '获取',
            click: () => {
              this.alert(4)
            },
            list: [
              {
                title: '适配指定开发平台',
                check: true
              },
              {
                title: '支持私有化部署',
                check: true
              },
              {
                title: '《飞廉》定制功能开发',
                check: true
              },
              {
                title: '《文鳐》定制功能开发',
                check: true
              },
              {
                title: '《仓颉》定制功能开发',
                check: true
              },
              {
                title: '《明镜》项目管理平台，定制功能开发，可私有化部署',
                check: true
              }
            ]
          }
        ]
      }
    }
  },
  methods: {
    alert(type) {
      if (type == 0){
        this.tip = '添加微信请注明"咨询飞廉"'
        this.wxImage = 'https://feilian.oss-cn-beijing.aliyuncs.com/wx.jpg'
      }else if (type == 1){
        window.open('https://gitee.com/sunseagear/wind','_blank')
        return
      }else if (type == 2) {
        this.tip = '购买个人版'
        this.wxImage = 'https://feilian.oss-cn-beijing.aliyuncs.com/personal.jpg'
      }else if (type == 3) {
        this.tip = '购买企业版'
        this.wxImage = 'https://feilian.oss-cn-beijing.aliyuncs.com/enterprise.jpg'
      }else if (type == 4) {
        this.tip = '请加微信咨询，添加微信请注明"咨询飞廉"'
        this.wxImage = 'https://feilian.oss-cn-beijing.aliyuncs.com/wx.jpg'
      }
      this.box = true
    }
  }
}
</script>

<style lang="scss">
.vip {
  background: white;
  padding-top: 80px;

  &-box {
    padding-top: 10px;
  }

  &-content {
    margin: 10px auto;
    width: 90%;
  }

  .head {
    margin-top: 10px;
    text-align: center;
    p {
      font-size: 18px;
    }
    span {
      font-size: 18px;
    }
  }
  .title {
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
  }

  .avue-data-pay {
    padding-bottom: 30px;
  }

  .avue-data-pay .item {
    width: 94%;
    min-height: 680px;
  }

  .avue-data-pay .list-item {
    margin-bottom: 7px;
    font-size: 12px;
    padding: 0 20px;
    line-height: 25px;

    a {
      font-size: 18px;
      color: #515a6e;
    }
  }
}
</style>
